<template>
    <div class="content">
        <TableLayout form-title="">
        <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" ref="formInline" :rules="rules" class="formInline" label-width="100px" slot="form">          
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="所属省">
                            <province v-model="formInline.fProvinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属市">
                            <city v-model="formInline.fCityId" :province="formInline.fProvinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区县">
                            <region v-model="formInline.fAreaId" :city="formInline.fCityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="账户状态">
                            <el-select v-model="formInline.accountStatus" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in formInline.accountStatusList" :key="item.statusNum" :label="item.statusName" :value="item.statusNum">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="负责人姓名">
                            <el-input v-model="formInline.accountName" placeholder="请输入负责人姓名" :maxlength="6"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="负责人手机号" prop="accountNum">
                            <el-input v-model="formInline.accountNum" placeholder="请输入负责人手机号" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="top-line">
                    <el-col :span="4" :offset="20"> 
                        <el-button type="primary" class="top-btn" @click="onSubmit('formInline')">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title"></div>
            <el-table :data="dataApply" style="width: 100%" border @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable">
                
                <el-table-column prop="sOrgName" align="center" label="用户名" min-width="100"></el-table-column>

                <el-table-column prop="responsibleName" align="center" label="负责人姓名" min-width="100"></el-table-column>

                <el-table-column align="center" label="负责人手机号" min-width="100">
                    <template scope="scope">
                        <span>{{ scope.row.responsibleNumber || '--' }}</span>
                    </template>
                </el-table-column>
                
                <el-table-column prop="phone" align="center" label="代理区域" min-width="80">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="areaDetail(scope.row.fOrgId)">详情</el-button>
                    </template> 
                </el-table-column>

                <el-table-column align="center" label="账户类型" min-width="100">
                    <template scope="scope">
                        <span v-if='scope.row.fOrgType == 0'>增值账户</span>
                        <span v-if='scope.row.fOrgType == 1'>充值账户</span>
                    </template>
                </el-table-column>

                <el-table-column prop="money" align="center" label="账户余额" min-width="100">
                    <template scope="scope">
                        <span>{{ scope.row.money.toFixed(2) }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="账户状态" min-width="100" align="center">
                   
                    <template scope="scope">
                        <span v-if="scope.row.sStatus=='0'">正常</span>
                        <span v-if="scope.row.sStatus=='1'">已冻结</span>
                    </template> 
                   
                </el-table-column>
    
                <el-table-column label="最后操作时间" min-width="170" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.sAuditTime | filterCreateTime }}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="操作人" min-width="100">
                    <template scope="scope">
                        <span>{{ scope.row.fAuditName || '--' }}</span>
                    </template>
                </el-table-column>

                <el-table-column align="left" label="其他操作" width="180">
                    <template scope="scope">    
                        <el-button type="text" class="btn-success" @click="userDetail(scope.row.fOrgId)" v-if="scope.row.bankStatus=='0'">查看银行卡</el-button>
                        <el-button type="text" class="btn-success" @click="sigleClose(scope.row.sStatus,scope.row.fOrgId,scope.row.fOrgType)" v-if="scope.row.sStatus=='0'">冻结</el-button>
                        <el-button type="text" class="btn-success" @click="sigleStart(scope.row.sStatus,scope.row.fOrgId,scope.row.fOrgType)" v-if="scope.row.sStatus=='1'">激活</el-button>    
                    </template>
                </el-table-column>           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

        <el-dialog title="查看负责人信息" :visible.sync="dialogFormVisible1" size="tiny">
            <div class='checkImg2'>
                <table class='dialogTable' align="left">
                    <tr><th>姓名</th><th>手机号</th></tr>
                    <tr v-for='item in peopleList' :key="item"><td>{{item.name}}</td><td>{{item.telephone}}</td></tr>
                </table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible1=false">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="查看代理区域" :visible.sync="dialogFormVisible2" size="tiny">
            <div class='checkImg2'>
                <table class='dialogTable3' align="left">
                    <tr v-for='(item,index) in areaList' :key="index"><td>代理区域{{index+1}}</td><td>{{item}}</td></tr>
                </table>
            </div>
            <div slot="footer" class="dialog-footer3">
                <el-button type="primary" @click="dialogFormVisible2=false">确定</el-button>
            </div>
        </el-dialog>    
    </div>
</template>

<script>
import TableLayout from 'components/TableLayout';
import {findAccountByPage, updateStatus, getOrgById} from 'api/accountMagement';
import { address} from 'api/examineMangement';
import { mapState, mapActions, mapGetters } from 'vuex';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import validate from '@/utils/validate';
import region from 'components/CascadeRegion/region';
export default{
    components: {TableLayout, province, city, region},
    data() {
        return {
            formInline: {// form表单数据
                fProvinceId: '',
                fAreaId: '',
                fCityId: '',
                accountNum: '',
                accountName: '',
                schoolId: '',
                schoolName: '',
                accountStatusList: [
                    {
                        statusNum: '',
                        statusName: '全部'
                    },
                    {
                        statusNum: '0',
                        statusName: '正常'
                    },
                    {
                        statusNum: '1',
                        statusName: '已冻结'
                    }
                ],
                accountStatus: ''
            },
            dialogFormVisible1: false,
            dialogFormVisible2: false,
            areaList: '',
            peopleList: [],
            dataApply: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: true,
            rules: {
                accountNum: [...validate.phone()]
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    // 初始化
    created() {
        this.listQuery.page = 1;
        this.searchFetchData();
    },
    filters: {
        filterCreateTime(val) {
            if (val) {
                return val.substr(0, val.length) 
            } else {
                return '--'
            }
        }
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 单个删除
        deleteRow(rows, row2) {
            let roleIds = rows;
            this.$confirm('确定要删除该家长?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                deleteParents(roleIds, row2).then(response => {
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                });  
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {           
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            findAccountByPage(this.listQuery.page, this.config.pageSize, this.formInline.fProvinceId, this.formInline.fCityId, this.formInline.fAreaId,
            this.formInline.accountName, '', this.formInline.accountNum, this.formInline.accountStatus).then(response => {              
                if (response.data.status==200) {
                    this.dataApply = response.data.content.list;
                    this.listQuery.total = response.data.content.pagination.total;
                    this.loading = false;    
                } else {
                    this.$message({
                        type: 'warning',
                        message: response.data.errorMsg
                    })
                }
            });
        },
        // 表单查询
        // onSubmit() {
        //     this.listQuery.page = 1;
        //     this.searchFetchData();
        // },
        onSubmit(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },
        // 冻结账户
        sigleClose(row, id, fOrgType) {
            this.$confirm('确定要冻结账户吗?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                updateStatus(row, id, fOrgType).then(res => {
                    this.searchFetchData();
                    this.$message.success('冻结成功')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 激活账户
        sigleStart(row, id, fOrgType) {
            this.$confirm('确定要激活账户吗?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                updateStatus(row, id, fOrgType).then(res => {
                    this.searchFetchData();
                    this.$message.success('激活成功')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 查询用户详情
        nameDetail(orgId) {
            getOrgById(orgId).then(res => {
                this.peopleList = res.data.content.people;
            })
            this.dialogFormVisible1 = true;
        },
        areaDetail(orgId) {
            address(orgId).then(res => {
                this.areaList = res.data.content;
            })
            this.dialogFormVisible2 = true;
        },
        userDetail(orgId) {
            this.$router.push({path: `agentDetail/${orgId}`});
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .dialog-footer{
        .el-button{
            margin: 80px 0 10px 0;
        }
        text-align: center;
    }
    .dialogTable{
        text-align:center;
        margin-left:50px;
        margin-top:30px;
        th{
            background:#f3f3f3;
        }
        th,td{
            text-align:center;
            padding:0 20px;
            border: solid 1px #ECECEC;
            width:220px;
            height:40px;
        }
    }
    .dialog-footer3{
        .el-button{
            margin: 50px 0 10px 0;
        }
        text-align: center;
    }
    .dialogTable3{
        text-align:center;
        margin-top:30px;
        margin:30px 50px;
        tr td:nth-of-type(1){
            width:30%;
        }
        tr td:nth-of-type(2){
            width:310px;
        }
        th,td{
            text-align:center;
            padding:0 20px;
            border: solid 1px #ECECEC;
            width:220px;
            height:40px;
        }
    }
}
</style> 